{% extends "base.html" %}
{% block head %}
<style>
		
	/*相框*/
	.pic{
		
		padding:20px 20px 10px 20px;
		box-shadow: 0px 0px 25px 1px rgba(50, 50, 50, 0.1);
	}
	/*拍照片按钮*/
	.take_photo{
		padding-top:10px;
		
	}
	/*人脸比对响应*/
	.response{
		padding:10px;
		
		height:200px;
		background:#fff;
		padding-top:5px;
		box-shadow: 0px 0px 25px 1px rgba(50, 50, 50, 0.1);
	}
	/*人脸比对按钮*/
	.compare{
		padding:40px 0px 20px 0px;
		text-align:center;
	}
	

	.function{
		padding:30px;
		text-align:center;
		color:#333;	
		border-bottom:1px solid #eee;
	}
	
	.p1{
		font-weight:200;
		font-size:16px;
		line-height:20px;
	}
	h3{
		text-align:center;
	}

	textarea{
		width:530px;
		overflow-Y:scroll;
		height:130px;
		border:0px solid transparent;
		background:transparent;
		resize:none;
		padding-bottom:0px;
		
		
	}
		
	
	
	
</style>
{% endblock %}

{% block title %} 人脸比对  {% endblock %}

{% block content %}
<div class="container" style="box-shadow: 0px 0px 25px 1px rgba(50, 50, 50, 0.3);">
	<div class="row">
		<div class="function">
			<div style="padding:10px;">
				<h1>寻他千百度</h1>
			</div>
			<p class="p1">体验Face++的人脸比对能力，对比照片核验用户身份</p>
			<p class="p1">该功能是基于Compare API搭建的，运用Face++的人脸比对技术，打造智能家居刷脸控制</p>
		</div>
	</div>
	<!--图片-->
	<div class='row' style="padding-top:30px;">
		<div class='col-md-6 text-center'>
			<div class="pic">
				<div>
					<img  id="img1" src="/static/img/image1.jpg" width='512' height='324' >
				</div>
				<div class="take_photo">
					<input type="submit" class="btn btn-default" id="take_a_photo1"	value="点击拍一张照片">
				</div>	
			</div>									
		</div>		
			
		<div class='col-md-6 text-center '>
			<div class="pic">
				<div>
					<img id="img2" src="/static/img/image2.jpg" width='512' height='324' >
				</div>
				<div class="take_photo">	
					<input type="submit" class="btn btn-default " id="take_a_photo2"	value="点击拍一张照片">
				</div>	
			</div>	
		</div>			
		
	</div>
	<!--人脸比对按钮-->
	<div class="row">
		<div class="col-md-12 compare">
			<input type="submit" id="face_compare" value="点击进行人脸比对" class="btn btn-primary text-center ">
		</div>
	</div>
	
	<!--人脸比对response-->
	<div class='row' style="padding-bottom:60px;">
		<div class="col-md-6">	
			<div  class="response">
				<h3>比对结果</h3>
				<h4 style="padding:30px;" id="compare_result"></h4>
			</div>
		</div>
		
		<div class="col-md-6">
			<div class="response">
				<h3>Response JSON</h3>
				<textarea readonly rows="10" rows="30" id="compare_json"></textarea>
			</div>	
		</div>	
	</div>
	
	<script>
		// 异步拍一张照片img1
		$(function(){
			$("#take_a_photo1").click(function(){
				$.ajax({
					url:'/take_a_photo',
					type:'GET',
					
					success: function(data){
						$("#img1").attr("src",data);
						alert("拍照成功");
					},
					error: function(data){
						aler("error");
					},
				});
			});
		});
		
		// 异步拍一张照片img2
		$(function(){
			$("#take_a_photo2").click(function(){
				$.ajax({
					url:'/take_a_photo',
					type:'GET',
					
					success: function(data){
						$("#img2").attr("src",data);
						alert("拍照成功");
					},
					error: function(data){
						aler("error");
					},
				});
			});
		});

			
		
		// 人脸比对
		$(function(){
			$("#face_compare").click(function(){
				$.ajax({
					url:"/face_compare",
					type:"GET",
					dataType:"json",
					
					data:{
						img1:$("#img1").attr("src"),
						img2:$("#img2").attr("src"),
						},
					success: function(data){
						
						$("#compare_json").html(data['JSON']);
						$("#compare_result").html(data['compare_result']);
						alert('人脸比对成功')
														
					},
					error: function(data){
						alert("error");
					},
				});
			});
		});		
		
		
		
	</script>

</div>

{% endblock %}





